<template>
    <div>{{xxx}}</div>
    <input v-model="fff.name" />
    <div>{{`my name is ${fff.name} and age is ${fff.age}address is ${fff.address}`}}</div>
    <div>{{fff.name}}</div>
    <div class="show">
        <TsInput placeholder="姓名" v-model="fff.name"></TsInput>
    </div>
    <div class="show">
        <TsInput placeholder="年龄" v-model="fff.age"></TsInput>
    </div>
    <div class="show">
        <TsInput placeholder="地址" v-model="fff.address"></TsInput>
    </div>
</template>
<script lang="ts">
import { ref, reactive, onUpdated} from 'vue';
import TsInput from './components/InputTS.vue'

interface Account {
    name: string,
    age: number | null,
    address: string,
}

export default {
    name: 'App',
    components: {TsInput},
    setup() {
        const xxx = ref<string>('xixitang');
        const fff = reactive<Account>({
            name: '',
            age: null,
            address: ''
        })
        onUpdated(() => {
            console.log(xxx.value);
        })
        return {
            xxx,
            fff
        }
    }
};
</script>
<style lang="stylus" scoped>
.show
    width 200px
    margin-left 100px
    
</style>